/**
 * The MIT License (MIT)
 * tab切换效果
 * @author 透笔度
 * @开源中国 https://my.oschina.net/tbd/blog
 * @码云 https://gitee.com/dgx
 */

const towxImg = require('../../../utils/towxImg');
// pages/tabchange3/tabchange3.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    current: 0,//当前所在滑块的 index
    scrollLeft: 0,//滚动条的位置,一个选项卡宽度是90（自定义来自css），按比例90*n设置位置
    navlist: ["选项卡1", "选项卡2", "选项卡3", "选项卡4", "选项卡5"],
    conlist: ["内容1", "内容2", "内容3", "内容4", "内容5"],
    article: ""
  },
  //tab切换
  tab: function (event) {
    console.log(event.target.dataset.current);
    this.setData({ current: event.target.dataset.current })
    //锚点处理
    this.setData({ scrollLeft: event.target.dataset.current * 90 })
  },
  //滑动事件
  eventchange: function (event) {
    console.log(event.detail.current)
    this.setData({ current: event.detail.current })
    //锚点处理
    this.setData({ scrollLeft: event.detail.current * 90 })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let code = '```\n<view class="container my-page">\n  <view>tab切换效果</view>\n  <view class="tab">\n    <scroll-view scroll-x="true" class="tab-nav" scroll-left="{{scrollLeft}}" scroll-with-animation="true">\n      <view class="tab-nav-c" style="width:{{navlist.length*90}}px">\n        <view wx:for="{{navlist}}" wx:key="unique" class="{{current==index?"on":""}}" data-current="{{index}}" bindtap="tab">{{item}}</view>\n      </view>\n    </scroll-view>\n    <swiper class="tab-box" current="{{current}}" bindchange="eventchange">\n      <swiper-item wx:for="{{conlist}}" wx:key="unique">\n        {{item}}\n        <view>滑动我也可以切换噢</view>\n      </swiper-item>\n    </swiper>\n  </view>\n</view>\n```\n\n```\nPage({\n  /**\n   * 页面的初始数据\n   */\n  data: {\n    current: 0,//当前所在滑块的 index\n    scrollLeft: 0,//滚动条的位置,一个选项卡宽度是90（自定义来自css），按比例90*n设置位置\n    navlist: ["选项卡1","选项卡2", "选项卡3", "选项卡4", "选项卡5"],\n    conlist: ["内容1", "内容2", "内容3", "内容4", "内容5"]\n  },\n  //tab切换\n  tab: function (event) {\n    console.log(event.target.dataset.current);\n    this.setData({ current: event.target.dataset.current })\n    //锚点处理\n    this.setData({ scrollLeft: event.target.dataset.current * 90 })\n  },\n  //滑动事件\n  eventchange: function (event) {\n    console.log(event.detail.current)\n    this.setData({ current: event.detail.current })\n    //锚点处理\n    this.setData({ scrollLeft: event.detail.current*90 })\n  },\n})\n```\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})